import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { changeId, reqGetChannelsList } from "../store/actions/channels";
import { reqGetNews } from '../store/actions/new';

export default function Channel() {
  const dispatch = useDispatch()
  const active =  useSelector(state => state.channels.active)
  useEffect(() => {
    dispatch(reqGetChannelsList())
  },[dispatch])
  const channelList = useSelector(state => state.channels.channelList)
  const clickChannels = (id) => {
    dispatch(changeId(id))
  }
  
  return (
    <ul className="catagtory">
      {channelList.map(item => {
        return ( <li key={item.id} onClick={() => clickChannels(item.id)}  className={ active === item.id ?'select':''}>{item.name}</li>)
      })}
    </ul>
  )
}

